<template>
    <div class="community">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>寝室管理</el-breadcrumb-item>
            <el-breadcrumb-item>寝室列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">
            <!--            搜索区域-->
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-select v-model="building" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in buildingList"
                                :key="item.id"
                                :label="item.bname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-input placeholder="请输入账号或者姓名"  v-model="queryInfo.name" clearable>
                        <el-button slot="append" icon="el-icon-search" @click="search" ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addUserBy">添加</el-button>
                </el-col>
            </el-row>
            <!--            表格区域-->
            <el-table :data="userList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="寝室号" prop="qname"></el-table-column>
                <el-table-column label="楼栋名称" prop="bname"></el-table-column>
                <el-table-column label="操作"  width="180px">
                    <template slot-scope="scope">
                        <!--                            修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateUser(scope.row)"></el-button>
                        <!--                            删除-->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
<!--        添加用户寝室信息-->
        <el-dialog
                title="分配寝室"
                :visible.sync="dialogAdd"
                width="50%" @close="coleAdd"
                >
            <el-select v-model="userBy" placeholder="请选择用户" clearable >
                <el-option
                        v-for="item in addUser"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id" >
                </el-option>
            </el-select>
            <el-cascader  v-model="roomId" :options="bdo"  clearable ref="bdo"></el-cascader>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd = false">取 消</el-button>
    <el-button type="primary" @click="addUserReal">确 定</el-button>
  </span>
        </el-dialog>
<!--        修改寝室分配-->
        <el-dialog
                title="修改寝室分配"
                :visible.sync="dialogUpdate"
                width="50%" @close="coleAdd"
        >
            <p>当前用户:{{this.userInfo.name}}</p>
            <p>当前寝室:{{this.userInfo.bname}} 的 {{this.userInfo.qname}}</p>
            <el-cascader  v-model="roomId" :options="bdo" clearable ref="bdo"></el-cascader>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdate = false">取 消</el-button>
    <el-button type="primary"  @click="updateBD">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "community",
        data(){
            return{
                roomId: '',
                //绑定练级框
                bdo: [],
                //未选择寝室的与用户
                addUser: [],
                //用户
                userBy: '',
                //楼栋列表
                buildingList: [],
                building: '',
                //用户列表
                userList: [],
                queryInfo:{
                    name: '',
                    qname: '',
                    bname: '',
                    bid: '',
                    page: 1,
                    size: 10
                },
                total: 0,
                //添加显示框
                dialogAdd: false,
                //修改框显示
                dialogUpdate: false,
                //用户信息
                userInfo: '',
            }
        },
        created() {
            this.getUserDormitory();
        },
        methods: {
            async getUserDormitory(){
                const {data: res} = await this.$http.get('Dormitory/getAllDormitory',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.userList = res.data.data
                this.total = res.data.total
                const {data: ref} = await this.$http.get('Dormitory/getAllBuilding')
                if(ref.code !==200) return this.$message.error(res.message)
                this.buildingList = ref.data
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getUserDormitory()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getUserDormitory()
            },
            //搜索
            async search(){
                this.queryInfo.bid = this.building
                const {data: res} = await this.$http.get('Dormitory/getAllDormitory',{
                    params: this.queryInfo
                })
                if(res.code !=200) return this.$message.error(res.messag)
                this.userList = res.data.data
                this.total = res.data.total
            },
            //删除用户
           async deleteUser(uid){
               const confirm = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).catch(err =>{
                   return err
               })
               if(confirm !== 'confirm') return this.$message.info('已取消删除')
                const {data:res} = await this.$http.get('Dormitory/deleteUserByid',{
                    params: {
                        uid: uid
                    }
                })
               if(res.code !== 0) return this.$message.error(res.message)
               this.$message.success(res.message)
               this.getUserDormitory()
            },
            //添加入住
            async addUserBy(){
                this.dialogAdd = true
                const {data: res} = await this.$http.get('Dormitory/getAllNodo')
                if(res.code !== 200) return  this.$message.error(res.message)
                this.addUser = res.data
                const {data: ref} = await this.$http.get('Dormitory/getAllDOBybu')
                this.bdo = ref.data
            },
            //添加
            async addUserReal(){

                const {data: res} = await this.$http.post('Dormitory/insertDB',{
                    id: this.userBy,
                    qid: this.roomId[1]
                })
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.userBy = ''
                this.roomId = ''
                this.dialogAdd = false
                this.getUserDormitory()
            },
            //关闭添加框
            coleAdd(){
                this.userBy = ''
                this.roomId = ''
            },
            //点击修改按钮
            async updateUser(userIn){
                this.dialogUpdate = true
                this.userInfo = userIn
                const {data: ref} = await this.$http.get('Dormitory/getAllDOBybu')
                this.bdo = ref.data

            },
            //修改
            async updateBD(){
                const {data: ref} = await this.$http.post('Dormitory/updateUDB',{
                    id: this.userInfo.id,
                    qid: this.roomId[1]
                })
                if(ref.code !==0) return this.$message.error(ref.message)
                this.$message.success(ref.message)
                this.dialogUpdate = false
                this.getUserDormitory()
            }
        }
    }
</script>

<style scoped>

</style>